@import '../style/variable';
@import '../style/mixin';

.dev-tools {
  .tools {
    .resources {
      @include overflow-auto(y);
      padding: 10px;
      font-size: 14px;
      .section {
        margin-bottom: 10px;
        border-radius: 4px;
        box-shadow: $box-shadow;
        overflow: hidden;
      }
      .title {
        @include right-circle-btn();
        padding: $padding;
        color: #fff;
        background: $blue;
        &.ok {
          background: $green;
        }
        &.warn {
          background: $yellow;
        }
        &.danger {
          background: $red;
        }
      }
      .link-list {
        font-size: $font-size-s;
        li {
          padding: 10px;
          background: #fff;
          word-break: break-all;
          a {
            color: $blue !important;
          }
        }
      }
      .image-list {
        @include clear-float();
        font-size: $font-size-s;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        padding: $padding !important;
        li {
          flex-grow: 1;
          cursor: pointer;
          &.image {
            height: 100px;
            font-size: 0;
          }
          overflow-y: hidden;
          img {
            height: 100px;
            min-width: 100%;
            object-fit: cover;
          }
        }
      }
      table {
        border-collapse: collapse;
        width: 100%;
        font-size: $font-size-s;
        td {
          padding: 10px;
          word-break: break-all;
          &.key {
            @include overflow-auto(x);
            white-space: nowrap;
            max-width: 120px;
          }
          &.control {
            padding: 0;
            font-size: 0;
            width: 40px;
            .icon-delete {
              cursor: pointer;
              color: $red;
              font-size: $font-size;
              display: inline-block;
              width: 40px;
              height: 40px;
              text-align: center;
              line-height: 40px;
              transition: color $anim-duration;
              &:active {
                color: $red-dark;
              }
            }
          }
        }
        background: #fff;
      }
    }
  }
}
